<!--首页左侧导航栏-->
<template>
   <div class="navigation">
     <div class="home">
       <router-link to="/">
         <div class="home-m general">M</div>
         <div class="home-home general">主页</div>
       </router-link>
     </div>
     <div class="home-fun">
       <router-link to="Star">
         <div class="celebrity general">明星</div>
       </router-link>
       <div class="apps general pad-top">应用</div>
       <div class="aibums general pad-top">专辑</div>
       <div class="dynamic general pad-top">动态</div>
       <div class="ranking general pad-top">排名</div>
     </div>
 </div>
</template>

<script>
export default {
  name: 'HomeNavigation'
}
</script>

<style scoped>
 body{
   margin: 0px;
   padding: 0px;
 }
 .navigation{
   width:55px;
   height:100vh;
   background: #000;
 }
 .home{
   position: absolute;
   top: 0px;
   left: 0;
   width: 55px;
   height: 160px;
   background: #111111;
   position: fixed;
 }
 .home-fun{
   position: absolute;
   top: 160px;
   left: 0;
   width: 55px;
   height:100%;
   background: #000000;
   position: fixed;
 }
 .home-m{
   font-size: 35px;
   padding-top: 20px;
 }
 .home-home{
   padding-top: 75px;
 }
 .general{
   color: #fff;
   text-align: center;
 }
 .celebrity{
   padding-top: 30px;
 }
 .pad-top{
   padding-top: 40px;
 }
</style>
